<template>
	<!-- :style="loading ? 'opacity: 0;' : 'opacity: 1;'" -->
	<view class="page">
		<image src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/top-bg.png" class="bg-color"
			mode="aspectFill"></image>
		<z-paging ref="paging" bg-color="rgba(0,0,0,0)">
			<uv-navbar slot="top" bgColor="rgba(0,0,0,0)" leftIcon=" " :fixed="true" title="个人中心" placeholder></uv-navbar>

			<view class="user-data-box">
				<image class="user-avater" :src="userInfo.image" mode="aspectFill"></image>
				<view class="data-box">
					<view class="user-name">
						{{userInfo.name}}
						<text class="user-type" v-if="userInfo.member_type == 1">新会员</text>
						<text class="user-type" v-if="userInfo.member_type == 2">VIP会员</text>
						<text class="user-type" v-if="userInfo.member_type == 3">VVIP会员</text>
					</view>
					<view class="user-phone">{{ userInfo.phone }}</view>
				</view>
			</view>
			<view class="my-object-box">
				<view class="object-title">
					<view class="title">我的项目</view>
					<view class="more" @click="goToProject">
						<text class="txt">查看更多</text>
						<uv-icon name="arrow-right" color="#898989" size="14"></uv-icon>
					</view>
				</view>
				<view class="object-item-box">
					<view class="item-box" v-for="(item, index) in itemList" :key="index" @click="goToProject(item.desc)">
						<image :src="item.img" class="img"></image>
						<text class="desc">{{ item.desc }}</text>
					</view>
				</view>
			</view>

			<uv-cell-group :border="false"
				:customStyle="{background: '#ffffff', margin: '0 30rpx 20rpx', borderRadius: '16rpx'}">
				<uv-cell icon="bell" :border="false" :isLink="true" title="消息通知" @click="jump('msg')"
					:cellStyle="{padding: '32rpx 30rpx', fontSize: '28rpx', fontWeight: '500', color: '#333333'}">
					<uv-badge slot="value" type="error" max="99" :value="userInfo.unread_message_number"></uv-badge>
				</uv-cell>
			</uv-cell-group>

			<uv-button text="退出登录" :customTextStyle="{ fontWeight: '500', fontSize: '28rpx', color: '#333333' }"
				:customStyle="{ width: '690rpx', height: '88rpx', background: '#FFFFFF', borderRadius: '16rpx', margin: '0 30rpx',borderColor: '#ffffff' }"
				@click="goOut"></uv-button>

			<!-- 尾部 -->
			<tabbar slot="bottom" ref="tabbar"></tabbar>
		</z-paging>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				userInfo: {},
				itemList: [{
						img: '/static/image/jxz.png',
						desc: '进行中'
					},
					{
						img: '/static/image/sgz.png',
						desc: '施工中'
					},
					{
						img: '/static/image/dpj.png',
						desc: '待评价'
					}
				]
			}
		},
		onShow() {
			uni.hideTabBar();
			let userInfo = uni.getStorageSync('userInfo')
			userInfo.phone = userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
			this.userInfo = userInfo

			this.$refs.tabbar.getUserInfo()
		},
		methods: {
			goToProject(name) {
				if (name) {
					uni.setStorageSync('project_type', {
						name
					});
				}
				uni.switchTab({
					url: '/pages/project/project'
				});
			},
			jump(type) {
				switch (type) {
					case 'msg':
						uni.switchTab({
							url: '/pages/message/message'
						});
						break
				}
			},
			goOut() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '您确定要退出登录么？',
					showCancel: true,
					success(res) {
						if (res.confirm) {
							that.khLogOut();
						}
					}
				});
			},
			khLogOut() {
				uni.showLoading({
					mask: true
				});

				this.$Api.khLogOut({}).then(res => {
					console.log(res, '退出登录');
					if (res.code == 200) {
						uni.hideLoading()
						uni.clearStorage();
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/block/block'
							});
						}, 300);
					} else {
						uni.showToast({
							title: res.message,
							icon: 'error'
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "index.scss";
</style>